<template>
  <view class="user-container">
    <view class="user-header">
      <view class="search-box">
        <uni-easyinput v-model="queryParams.userName" placeholder="请输入用户名称" clearable @clear="handleClear"></uni-easyinput>
        <button type="primary" size="mini" @click="handleQuery">搜索</button>
        <button type="default" size="mini" @click="resetQuery">重置</button>
      </view>
    </view>
    
    <view class="user-list">
      <view class="user-item" v-for="(item, index) in userList" :key="index" @click="handleRowClick(item)">
        <view class="user-info">
          <text class="user-name">{{item.userName}} ({{item.nickName}})</text>
          <text class="user-status" :class="{'enabled': item.status === '0', 'disabled': item.status === '1'}">
            {{item.status === '0' ? '正常' : '停用'}}
          </text>
        </view>
        <view class="user-detail">
          <text class="user-dept">{{item.dept && item.dept.deptName || ''}}</text>
          <text class="user-phone">{{item.phonenumber}}</text>
        </view>
        <view class="user-action">
          <button type="primary" size="mini" @click.stop="handleEdit(item)">编辑</button>
          <button type="warn" size="mini" @click.stop="handleDelete(item)">删除</button>
        </view>
      </view>
    </view>

    <uni-load-more :status="loadMoreStatus"></uni-load-more>
  </view>
</template>

<script>
import { listUser, delUser } from "@/api/system/user";

export default {
  name: "User",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 加载更多状态
      loadMoreStatus: 'more'
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      this.loadMoreStatus = 'loading';
      
      listUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.loadMoreStatus = this.userList.length >= this.total ? 'noMore' : 'more';
      });
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      };
      this.getList();
    },
    // 清空输入框
    handleClear() {
      this.getList();
    },
    // 行点击事件
    handleRowClick(row) {
      this.$tab.navigateTo("/pages/system/user/detail?userId=" + row.userId);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
    },
    // 编辑按钮操作
    handleEdit(row) {
      this.$tab.navigateTo("/pages/system/user/edit?userId=" + row.userId);
    },
    // 删除按钮操作
    handleDelete(row) {
      const userIds = row.userId;
      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(() => {
        return delUser(userIds);
      }).then(() => {
        this.getList();
        this.$modal.showSuccess("删除成功");
      }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.user-container {
  padding: 10px;
}

.user-header {
  margin-bottom: 10px;
  
  .search-box {
    display: flex;
    align-items: center;
    
    button {
      margin-left: 10px;
    }
  }
}

.user-list {
  .user-item {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    
    .user-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      
      .user-name {
        font-size: 16px;
        font-weight: bold;
      }
      
      .user-status {
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
        
        &.enabled {
          background-color: #e1f3d8;
          color: #67c23a;
        }
        
        &.disabled {
          background-color: #fde2e2;
          color: #f56c6c;
        }
      }
    }
    
    .user-detail {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      color: #666;
      font-size: 14px;
    }
    
    .user-action {
      display: flex;
      justify-content: flex-end;
      
      button {
        margin-left: 10px;
        font-size: 12px;
      }
    }
  }
}
</style> 